<template>
	<view class="addAddress">
	
		<view class="addAddress-content">
			<view class="content-item">
				<text>收货人</text>
				<input type="text" v-model="name" placeholder="请输入名字">
			</view>
			<view class="content-item">
				<text>手机号码</text>
				<input type="number" maxlength="11" v-model="phone" placeholder-style="color:#999999" placeholder="请输入手机号">
			</view>
			<view class="content-item" @click="visible = true">
				<text>所在地区</text>  
				<input type="number" v-model="addressAll" disabled placeholder="请选择所在地区">
			</view>
			<view class="content-item">
				<text>详细地址</text>
				<input type="text" placeholder="街道、小区楼栋/乡村名称" style="width: 450rpx;" v-model="address">
			</view>
		</view>
		<view class="other_box">  
			<!-- <view class="items">
				<view class="title">标签</view>
				<view class="tags">
					<text>学校</text>
					<text>家</text>
					<text>公司</text>
				</view>
			</view> -->
			<view class="content-items" style="margin-top: 0;">
				<view class="title">设为默认地址</view>
				<u-switch v-model="isdefault" size="16" activeColor='#333'></u-switch>
			</view>
		</view>
		<piaoyi-cityPicker @confirm="confirm" @cancel="cancel" :column='column' :defaultValue='defaultValue' :maskCloseAble='maskCloseAble' :visible="visible"></piaoyi-cityPicker>
		<view class="address-btm" @click="handleSubmit">保存</view> 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
				maskCloseAble: true, 
				addressAll:'',
				id:'',
				defaultValue: [1532,1533,1534],
				column: 3,
				name:'',
				phone:'',
				province:'',
				city:'',
				area:'',
				address:'',
				isdefault:true
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo 
			}
		},
		onLoad(options) {
			 if(options.id){ 
				 uni.setNavigationBarTitle({
				 	title:"编辑地址"
				 })
				 this.id = options.id
				  this.getDetail()
			 }else{
				 uni.setNavigationBarTitle({
				 	title:"添加地址"
				 })
			 }
		},
		methods: { 
			getDetail(){
				this.$http({
					url:`/member/address/${this.id}`,
					method:'get',
				}).then(data=>{
					this.name = data.name
					this.phone = data.phoneNumber
					this.address = data.detailAddress 
					this.addressAll = data.province+data.city+data.region
					
					this.province = data.province
					this.city = data.city
					this.area = data.region
					
					//this.defaultValue = [data.province,data.city,data.area]
					this.isdefault = data.defaultStatus ? true : false
					this.$refs.loadingCover.hide();
				})
			},
			 confirm (val) {  
			 	this.addressAll = val.name
			 	this.province = val.provinceName
			 	this.city = val.cityName
			 	this.area = val.areaName
			 	this.visible = false
			 },
			 cancel () {
			 	this.visible = false
			 }, 
			// 保存地址按钮
			handleSubmit() { 
				let reg = /^1[3456789]\d{9}$/
				if (!reg.test(this.phone)) {
					uni.showToast({
						title: "请填写正确的手机号",
						icon: "none", 
					});
				}
				this.isdefault = this.isdefault ? 1 : 0 
				if(this.id !==''){
					this.$http({
						url: '/member/address/update',
						method: "post",
						data: { 
							id:this.id,
							memberId:this.userInfo.id,
							defaultStatus: this.isdefault,
							name: this.name,
							phoneNumber: this.phone,
							detailAddress: this.address,
							province: this.province,
							city: this.city,
							region: this.area
						}
					}).then(data => {
						uni.showToast({
							title: "编辑成功",
							icon: "none", 
						});
						let pages = getCurrentPages()
						let prePages = pages[pages.length - 2].$vm 
						prePages.getAddressList()
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}) 
				}else{
					this.$http({
						url: '/member/address/add',
						method: "post",
						data: { 
							memberId:this.userInfo.id,
							defaultStatus: this.isdefault,
							name: this.name,
							phoneNumber: this.phone,
							detailAddress: this.address,
							province: this.province,
							city: this.city,
							region: this.area
						}
					}).then(data => {
						uni.showToast({
							title: "添加成功",
							icon: "none", 
						});
						let pages = getCurrentPages()
						let prePages = pages[pages.length - 2].$vm 
						prePages.getAddressList()
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}) 
				}
				
			},

		}
	}
</script>

<style>
	page{
		background: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.other_box{
		background: #fff;
		margin-top: 40rpx;
		padding:48rpx 24rpx;
		.content-items{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 60rpx;
			.title{ 
					font-size: 28rpx;
					color: #020202;
			}
		}
		.items{
			display: flex;
			align-items: center;
			.title{
				font-size: 28rpx;
				color: #020202;
				font-weight: bold;
				margin-right: 40rpx;
			}
			.tags{
				display: flex;
				align-items: center;
				text{
					width: 110rpx;
					height: 56rpx;
					background: #F8F8F8;
					border-radius: 28rpx;
					text-align: center;
					line-height: 56rpx;
					font-size: 24rpx;
					color: #020202;
					margin-right: 26rpx;
				}
			}
		}
	}
	.addAddress {
		width: 100%;  
		padding: 30rpx;
		box-sizing: border-box;
		overflow: hidden;

		.dingwei {
			padding: 10rpx;
		}

		.back {
			position: absolute;
			left: 20rpx;
			top: 90rpx;
		}

		.top {
			position: relative;
			width: 100%;
			height: 160rpx;
			background-color: #fff;

			>text {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 200rpx;
				height: 50rpx;
				margin-top: 10rpx;
				margin-left: -68rpx;
			}
		}

		.addAddress-content {
			display: flex;
			flex-direction: column;
			width: 100%;  
			background-color: #fff;
			padding:0 30rpx;
			box-sizing: border-box;

			.content-item {
				display: flex;
				align-items: flex-start;
				width:100%; 
				margin: 0 auto;
				font-size: 30rpx;
				color: #333333;
				padding:30rpx 0;

				>text {
					display: block;
					font-weight: bold;
					font-size: 28rpx;
					width: 120rpx;
				}

				>input { 
					margin-left: 20rpx;
					font-size: 28rpx;
					flex: 1;
				}

				>view { 
					margin-left: 20rpx;
				}

				.data-v-1e866cbe {
					// border: 1rpx solid red !important;
				}
			}

			.content-items {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width:100%;
				margin: 0 auto;
				font-size: 30rpx;
				color: #333333;
				padding:20rpx 0;

			}
		}

		.address-btm {
			position: fixed;
			width: 690rpx;
			height: 90rpx;
			left: 50%;
			bottom: 100rpx;
			transform: translate(-50%);
			line-height: 90rpx;
			text-align: center;
			background: #020202;
			border-radius: 50px;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>
